<script setup>

</script>
<template>
    <div class="contain">
        <div class="hobby-card" v-for="item in 3">
            <img src="../../assets/layout/nagisa.png" alt="">
            <p class="title">ACG</p>
            <p class="sub-title">动漫/创作/轻小说</p>
            <p class="text">Clannad</p>
            <p class="text">无论今后所遇,但愿无悔</p>
            <p class="text">听潮鸣潮起潮落</p>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.contain {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 80%;
    height: 80%;
    align-items: center;

    .hobby-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px;
        margin: 16px 0;
        border-radius: 16px;
        min-width: 30%;
        height: 80%;
        background-color: rgba(149, 255, 184, 0.7);

        img {
            border: 1px solid #caf9d1;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin-bottom: 16px;

        }

        @media (max-width: 820px) {
            height: 50%;

            img {
                width: 100px;
                height: 100px;
            }
        }

        p {
            text-align: center;
            margin: 1px 0;

            &.title {
                font-size: 24px;
                font-weight: bold;
            }

            &.sub-title {
                font-size: 16px;
                font-weight: bold;
            }

            &.text {
                font-size: 14px;
                font-weight: bold;
            }
        }
    }
}
</style>